
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./vue.js"></script>
    <script src="./city_code.js"></script>
    <style>
      button {
        margin: 5px;
      }
      .active {
        color: white;
        background-color: black;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <div class="province">
        <button
          v-for="provinceItem in cityCode"
          @click="province=provinceItem.name"
          :class="{active:province==provinceItem.name}"
        >
          {{provinceItem.name}}
        </button>
      </div>
      <hr />
      <div class="city" v-if="province&&!pro.includes(province)">
        <button
          v-for="cityItem in cityCode.find(item=>item.name==province).city"
          @click="city=cityItem.name"
          :class="{active:city==cityItem.name}"
        >
          {{cityItem.name}}
        </button>
      </div>
      <hr />
      <div class="area" v-if="city">
        <button
          v-for="areaItem in cityCode.find(item=>item.name==province).city.find(item=>item.name==city).area"
          @click="area=areaItem.name"
          :class="{active:area==areaItem.name}"
        >
          {{areaItem.name}}
        </button>
      </div>
      <hr />
      <button v-show="area||pro.includes(province)" @click="ok">确认</button>
    </div>
  </body>
  <script>
    let app = Vue.createApp({
      data() {
        return {
          cityCode: data,
          province: "",
          city: "",
          area: "",
          // 特殊省份
          pro: ["台湾省", "香港特别行政区", "澳门特别行政区"],
        };
      },
      watch: {
        province() {
          this.city = this.area = "";
        },
      },
      methods: {
        ok() {
          if (this.pro.includes(this.province)) {
            alert(this.province);
          } else {
            alert(this.province + "-" + this.city + "-" + this.area);
          }
        },
      },
    });
    app = app.mount("#app");
  </script>
</html>
